<template>
	<view class="container">
		<!--{{ queryMaterial }} -->
		<uni-card>
			<view>
				<!-- 物料名称 -->
				<view class="text-item" style="color: #398ade;font-weight: 600;font-size: 30rpx;">
					<text class="label">物料名称：</text>
					<text class="content">{{ queryMaterial.MATERIAL_NAME }}</text>
				</view>
				
				<!-- 详细信息 -->
				<view class="item-top">
					<view class="left">
						<view class="text-item">
							<text class="label">料号：</text>
							<text class="content">{{ queryMaterial.MATERIAL }}</text>
						</view>
						<view class="text-item">
							<text class="label">线体：</text>
							<text class="content">{{ queryMaterial.LINE_ID }}</text>
						</view>
						<view class="text-item">
							<text class="label">工序：</text>
							<text class="content">{{ queryMaterial.PROCESS }}</text>
						</view>
						<view class="text-item">
							<text class="label">工单：</text>
							<text class="content">{{ queryMaterial.WO }}</text>
						</view>
					</view>
				</view>
			</view>
		</uni-card>
		
		<view class="car-unicard" style="display: flex;flex-direction: column;gap: 20rpx;margin-top: 15rpx;">
			<uni-card v-for="(item, index) in containerList" :key="index">
				<view class="text-item" style="color: #398ade;font-weight: 600;font-size: 30rpx;">
					<text class="label">载具编码：</text>
					<text class="content">{{ item.containerCode }}</text>
				</view>
				<view style="display: flex;flex-direction: column;gap: 10rpx;">
					<view class="item-top">
						<view style="flex: 8;">
							<uni-card v-for="(item2, index2) in item.containerList" :key="index2">
								123
							</uni-card>
						</view>
						<view class="right">
							<view>
								<!-- 勾选组件 -->
								<!-- <checkbox-group @change="handleChange($event, index2)">
									<checkbox :value="'material' + index" :checked="item2.checked" style="transform:scale(1.1)" />
								</checkbox-group> -->
							</view>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
		
		<view class="commonButton">
			<u-button
				type="warning" 
				style="font-size: 36rpx;width: 100%;"
			>
				确认发料
			</u-button>
		</view>
	</view>
</template>

<script>
	import { uniCard, uniCombox } from '@dcloudio/uni-ui'
	import { checkInventoryAPI, manualDispatchAPI } from '@/api/work/usageAPIList'
	import { mapGetters, mapMutations  } from 'vuex'
	export default {
		components: {
			uniCard,
			uniCombox
		},
		data() {
			return {
				queryMaterial: {},
				containerList: [{ containerList: [{ checked: false }] }]
			};
		},
		onLoad(options) {
			if (Object.keys(this.getMaterialData).length > 0) {
				this.queryMaterial = this.getMaterialData
			}
		},
		onUnload() {
			this.CLEAR_MATERIAL_DATA()
		},
		computed: {
			...mapGetters(['getMaterialData'])
		},
		methods: {
			...mapMutations(['CLEAR_MATERIAL_DATA']),
			async checkInventory() {
				const submitForm = {
					WO: this.queryMaterial.WO,
					LINE_ID: this.queryMaterial.LINE_ID,
					MATERIAL: this.queryMaterial.MATERIAL,
					PLANT: this.queryMaterial.PLANT,
					PROCESS: this.queryMaterial.PROCESS
				}
				console.log(submitForm)
				// const res = await checkInventoryAPI(submitForm)
			},
			handleChange(e, index) {
				
			}
		}
	}
</script>

<style lang="scss">
	.commonButton {
		width: 100%;
		display: flex;
		gap: 20rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 15rpx;
		justify-content: space-between;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	.item-top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 10rpx 15rpx;
		
		.left {
			flex: 8;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 8rpx;
		}
		
		.right {
			flex: 2;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		
		.text-item {
			display: flex;
			width: 100%;
			word-wrap: break-word;
			overflow-wrap: break-word;
			color: #000;
			font-size: 28rpx;
			line-height: 1.5;
		
			.label {
				white-space: nowrap;
				color: #666;
				min-width: 120rpx;
			}
		
			.content {
				flex: 1;
				word-wrap: break-word;
				overflow-wrap: anywhere;
			}
		}
	}
	::v-deep .uni-card {
		margin: 0 !important;
		padding: 0 !important;
		border-radius: 10rpx;
	}
	.car-unicard {
		.uni-card {
			background-color: #fefecc;
			border-color: #fcf493;
			margin-bottom: 20rpx !important;
		}
	}
</style>
